let index = layer.load(0, { shade: [0.3, '#ccc'] });
//获取本地存储的商品id
let id = sessionStorage.getItem('proId')
console.log(id);
// 判断id 是否有值及是否为数值
if (!id) {
    layer.msg('非法请求')  //如果不是点击详情按钮进入本页面的跳回列表页
    location.href = "./list.html"
}
//ajax 请求获取数据
pAjax({
    url: '../server/detail.php',
    data: { id },
    dataType: 'json',
    success(res) {
        console.log(res)

        // 解构
        let { data: { imgpath }, data, meta } = res
        if (meta.status == 0) {
            let imgs = imgpath.split('==========')
            // console.log(imgs)

            //渲染初始大图 和中图
            $('.enlarge .big img,.middle img').prop('src', imgs[0])

            //遍历
            let smallImg = imgs.map(function (v) {
                // console.log(v);
                return `<li><img src=${v} /></li>`;
            }).join("")
            // 获取小图放入ul标签
            $('.enlarge .small .wraper>ul').html(smallImg)
            // console.log(smallImg)
            layer.close(index);
            // 将商品库存渲染到id="num"的输入框中
            $('#num').attr('stock', data.stock);
            //渲染标题和价格及详情
            $('.description>h4').text(data.name);
            $('.souceprice>span').text(data.price);

            // $('.details .tab>ol>li').first().html(data.introduce);
            // 如果有商品详情则渲染商品详情,没有则渲染商品介绍
            $('.details .tab>ol>li').first().html(data.detail);


        }
        else {
            layer.msg('请求失败');
            location.href = "./list.html"
        }

    }
})
//获取所有li下的小图绑定点击事件
$('.small ul li>img').click(function () {
    let imgSrc = $(this).prop('src')
    $('.enlarge .middle img,.big img').prop('src', imgSrc)
})
//中图盒子移入移出事件
$('.enlarge .middle').hover(function (e) {
    $('.enlarge .shade, .big').css('display', 'block')

}, function () {
    $('.enlarge .shade,.big').css('display', 'none')

})
    .mousemove(function (e) {
        e = e || window.event
        let x = e.offsetX
        let y = e.offsetY
        let shadeX = x - 50
        let shadeY = y - 50
        if (x <= 50) { shadeX = 0; }
        if (y <= 50) { shadeY = 0; }
        if (x >= 350) { shadeX = 300; }
        if (y >= 350) { shadeY = 300; }

        $('.enlarge .shade').css({ top: shadeY + "px", left: shadeX + "px" })
        $('.enlarge .big img ').css({ top: `-${shadeY * 4}px`, left: `-${shadeX * 4}px` })
    })
  // 点击购买商品数量的累加
$('.add').click(function () {
  // 只要点击了加的按钮,就解除键按钮的禁用
  $(this).next().prop('disabled', false);
  // 获取到商品的库存
  let stock = $(this).prev().attr('stock') - 0;// -0减值转为数值
  // 获取输入框中的值
  let n = $(this).prev().val() - 0;
  n++;
  if (n >= stock) {
    $(this).prop('disabled', true);// 禁用点击按钮
    // 将最大库存渲染到输入框
    $(this).prev().val(stock);
  }
  $(this).prev().val(n);
})
// 点击购买商品数量的递减
$('.reduce').click(function () {
  // 只要点击了减的按钮,就解除加按钮的禁用
  $(this).prev().prop('disabled', false);
  // 获取到商品的库存
  let stock = $(this).prev().prev().attr('stock') - 0;// -0减值转为数值
  // 获取输入框中的值
  let n = $(this).prev().prev().val() - 0;
  n--;
  if (n <= 1) {
    $(this).prop('disabled', true);// 禁用点击按钮
    // 将最小购买数渲染到输入框
    $(this).prev().prev().val(stock);
  }
  $(this).prev().prev().val(n);
})
// 点击进入购物车
$('.toCart').click(function () {
  // 通过cookie获取用户名
  let username = getCookie('loginStatus');
  console.log(username);
  // 判断用户是否登录
  if (!username) {
    layer.msg('请先登录');
    location.href = './logo.html';
    return false;
  }
  // 已经登录则跳转至购物车页面
  location.href = 'gouwuche.html';
  return false;
})
// 点击加入购物车
$('.addBtn').click(function () {
  // 通过cookie获取用户名
  let username = getCookie('loginStatus');
  // 判断用户是否登录
  if (!username) {
    layer.msg('请先登录');
    location.href = './logo.html';
    return;
  }
  // 用户已经登录则加入购物车
  // 获取库存
  let stock = $('#num').attr('stock') - 0;
  // 获取本次购买数量
  let num = $('#num').val() - 0;
  // 组装加入购物车的数据
  let cartObj = { username, id, num };

  // 获取本地购物车数据
  let str = localStorage.getItem('goodsData');
  // 购物车数组
  let arr;
  if (!str) { // 之前购物车为空
    arr = [cartObj];
  } else {
    // 判断用户之前是够添加过此商品的购物车
    let cartArr = JSON.parse(str);
    let cart = cartArr.find(v => {
      return v.id === id && v.username === username;
    });
    if (!cart) { // 之前没有添加过次购物车
      cartArr.push(cartObj);
      arr = cartArr;
      layer.msg('加入购物车成功');
    } else {
      let n1 = cart.num - 0; // 之前添加购物车的数量
      let n2 = n1 + num;
      if (n2 > stock) { // 添加的商品数超过库存
        layer.msg('购物数量超过库存');
        n2 = stock;
      } else {
        layer.msg('加入购物车成功');
      }
      // 将购买数累加并赋值给对象cart的num属性
      cart.num = n2;
      arr = cartArr
    }
  }
  // 将购物车数据arr写到localStorage中
  localStorage.setItem('goodsData', JSON.stringify(arr));

})
